<template>
  <div class="shopcar">
    <div v-show="carlist.length!=0" class="banxin">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/shopcar' }">加入购物车</el-breadcrumb-item>
        <el-breadcrumb-item>购买商品</el-breadcrumb-item>
        <el-breadcrumb-item>支付资金</el-breadcrumb-item>
        <el-breadcrumb-item>媒体执行</el-breadcrumb-item>
        <el-breadcrumb-item>交易成功</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="carheader">
        <div class="actived">全部商品</div>
        <el-button type="primary" class="fr">联系客服</el-button>
      </div>
      <div class="cartilte">
        <div>全选</div>
        <div>商品信息</div>
        <div>价格(元)</div>
        <div>数量</div>
        <div>金额</div>
      </div>
      <div class="carlist" v-for="(item,index) in carlist" :key="index">
        <div>
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label="index"></el-checkbox>
          </el-checkbox-group>
          <!-- <input type="checkbox"> -->
          <img src="/usericon/personal_tx001.png">
          <div>
            <h4>
              <span>{{item.modular_type_name}}</span>
              {{item.goods_title}}
            </h4>
            <p>所属分类: {{item.theme_name}}</p>
            <p>媒体领域: {{item.filed_name}}</p>
            <p>商品编号: {{item.goods_num}}</p>
          </div>
        </div>
        <div>{{item.priceclassify_name}}:{{item.unit_price}}</div>
        <div>{{item.buy_number}}</div>
        <div>{{item.unit_price}}</div>
      </div>
      <div class="jiesuan">
        <div class="fl">
          <el-checkbox v-model="checked" @change="allcheck">全选</el-checkbox>
        </div>
        <div class="fl" @click="shachu">删除商品</div>
        <div class="fl" @click="shoucang">移入收藏</div>
        <div class="fl" @click="qingkong">清空购物车</div>
        <div class="fr">结算</div>
        <div class="fr">已选择{{checkList.length}}件 共计: <span class="red">{{checkpir}}</span></div>
      </div>
    </div>
    <div v-show="carlist.length==0" class="banxin">
      <div class="nogoodstitle">
        你的购物车空空如也
      </div>
      <div class="nogoodstilte">推荐媒体</div>
      <div class="nogoodstuijian">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</template>
<script>
import { gettoken } from "@@/assets/commen.js";
export default {
  layout: "shop",
  data() {
    return {
      carlist: [],
      checkList: [],
      checked: false,
      list_num: [],
    };
  },
  methods: {
    allcheck() {
      if (this.checked) {
        this.checkList = this.list_num;
      } else {
        this.checkList = [];
      }
    },
    shachu(){                                   //---------------------删除选中
        let params_str =''
        this.checkList.forEach(item => {
          params_str +=this.carlist[item].shopcart_id + '-'  
        });
        params_str = params_str.substring(0,params_str.length-1)
        console.log(params_str)
        gettoken().then(val => {
            return  this.$axios.post('/shopcartDel/'+params_str,{},{ headers: { Authorization: "Bearer" + val } })
        }).then(res =>{
            location.reload()
        })
    },
    shoucang(){                                     //--------------移入收藏
        gettoken().then(val => {
            this.checkList.forEach(item => {
                this.$axios.post('/collectionGoods',{
                    goods_id:this.carlist[item].goods_id,
                    modular_type:this.carlist[item].modular_type
                },{ headers: { Authorization: "Bearer" + val } }).then(res =>console.log(res.data))
            });
        })
    },
    qingkong(){                                         //------------清空购物车
        let params_str =''
        this.carlist.forEach(item => {
          params_str +=item.shopcart_id + '-'  
        });
        params_str = params_str.substring(0,params_str.length-1)
        console.log(params_str)
        gettoken().then(val => {
            return  this.$axios.post('/shopcartDel/'+params_str,{},{ headers: { Authorization: "Bearer" + val } })
        }).then(res =>{
            location.reload()
        })
    }
  },
  mounted() {
    gettoken()
      .then(val => {
        return this.$axios.post(
          "/getShopcart",
          {},
          { headers: { Authorization: "Bearer" + val } }
        );
      })
      .then(res => {
        this.carlist = res.data.data;
        for (let i = 0; i < this.carlist.length; i++) {
          this.list_num.push(i);
        }
        console.log(this.carlist,'carlist')
      })
      .catch(err => {
        console.log(err.response);
      });
  },
  computed: {
    checkpir(){
      let price = 0;
      this.checkList.forEach(item => {
        price += Number(this.carlist[item].total_price) 
      })
      return price
    }
  },
};
</script>

<style scoped>
.el-breadcrumb {
  position: absolute;
  right: 0;
  top: -80px;
}
.banxin {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.carheader {
  height: 56px;
  background-color: #fff;
  padding: 12px 30px 0 30px;
  border-bottom: 1px solid #d2d2d2;
}
.carheader > div {
  width: 110px;
  height: 43px;
  padding-top: 5px;
  text-align: center;
  float: left;
}
.cartilte {
  height: 40px;
  overflow: hidden;
  background-color: #f8f7ff;
  border-bottom: 1px solid #d2d2d2;
  line-height: 40px;
  font-size: 14px;
  color: #666;
}
.cartilte > div {
  float: left;
}
.cartilte > div:nth-child(1) {
  padding-left: 20px;
  width: 215px;
}
.cartilte > div:nth-child(2) {
  width: 315px;
}
.cartilte > div:nth-child(3) {
  width: 305px;
}
.cartilte > div:nth-child(4) {
  width: 252px;
}
.carlist {
  height: 160px;
  background-color: #fff;
}
.carlist > div {
  height: 160px;
  float: left;
}
.carlist > div:nth-child(1) {
  width: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carlist > div:nth-child(1) p {
  color: #666;
  width: 180px;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.carlist > div:nth-child(1) h4 {
  font-weight: 400;
  margin-bottom: 10px;
}
.carlist > div:nth-child(1) h4 span {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  background-color: #5141ed;
  color: #fff;
  border-radius: 3px;
}
.carlist > div:nth-child(1) img {
  padding: 0 30px;
}
.carlist > div:nth-child(2) {
  width: 270px;
  text-align: center;
  line-height: 160px;
}
.carlist > div:nth-child(3) {
  width: 256px;
  text-align: center;
  line-height: 160px;
}
.carlist > div:nth-child(4) {
  width: 220px;
  text-align: center;
  line-height: 160px;
  padding-left: 39px;
}
.jiesuan {
  height: 60px;
  padding-top: 20px;
  margin-top: 40px;
  background-color: #fff;
  font-size: 14px;
  color: #242424;
}
.jiesuan div.fl {
  width: 120px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}
.jiesuan div:nth-child(5){
  height: 60px;
  width: 156px;
  background-color: #DE0D0D;
  color: #fff;
  font-size: 24px;
  line-height: 60px;
  position: relative;
  top: -20px;
  left: 0;
  text-align: center;
  margin-left: 20px;
}
.jiesuan div:nth-child(6) span{
  font-size: 20px;
}
.nogoodstitle{
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nogoodstilte{
  height: 30px;
  font-size: 24px;
}
.nogoodstuijian{
  overflow: hidden;
}
.nogoodstuijian > div{
  width: 230px;
  height: 280px;
  float: left;
  background-color: #fff;
  margin-right: 10px;
}
</style>
